<template>
    <div class="direct">
        <div class="demo-input-suffix" style="margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinTitle" >显示垃圾桶名称标签</el-checkbox>
        </div>
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinPicture" >显示垃圾桶图片</el-checkbox>
        </div>
        <div class="allmap" id="allmap"></div>
        <div class="tree">
            <el-tree :data="data_tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            
        </div>
        <!-- <el-form
            title="详细信息"
            id="VillageDetail"
            :visible.sync="VillageDetail"
            class="dialogwhole"
            hidden="true"
        >
            <div>单位名称：天塔街道</div>
            <div>地址：</div>       
            <hr />
            <div>管理单位：天塔街道</div>
            <div>联系人：王雪</div>
            <div>联系电话：15022033221</div>
            <hr />
            <div>厨余垃圾桶：4</div>
            <div>可回收垃圾桶：4</div>
            <div>有害垃圾桶：2</div>
            <div>其他垃圾桶：4</div>
        </el-form> -->
          <div class="rightinformation">
            <p for>
                <span id="span1"></span>
            </p>
            <p for>
                <span id="span2"></span>
            </p>
            <hr />
            <p for>
                <span id="span3"></span>
            </p>
            <p for>
                <span id="span4"></span>
            </p>
            <p for>
                <span id="span5"></span>
            </p>
            <hr>
            <p for>
                <span id="span6"></span>
            </p>
            <p for>
                <span id="span7"></span>
            </p>
            <p for>
                <span id="span8"></span>
            </p>
            <p for>
                <span id="span9"></span>
            </p>
        </div>
    </div>
</template>
<script>
import markerIcon_rubbishReal from '../../../assets/img/RubbishBoxRealScene.png'
import markerIcon_rubbish from '../../../assets/img/Rubbish.png'
export default {
  data () {
    return {
      data_tree: [],
      defaultProps: {
        children: 'children',
        longitude: 'longitude',
        latitude: 'latitude',
        label: 'label'
      },
      checked: true,
      map: '',
      scopeCircle: '',
      checkbox_isShowDustbinPicture: '',
      checkbox_isShowDustbinTitle: ''
    }
  },
  mounted () {
    this.initMap();
    this.addMarker_Person();
    this.loadDate_Tree()
    this.loadAllBoxs('');
  },
  methods: {
   async loadDate_Tree () {
      console.log(localStorage.getItem('STREET_NO'))
      // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetGroupDataApi?StreetNo='+localStorage.getItem('clentno');
      // GarbagePointsTYApi/BasicData/GetGroupDataApi?StreetNo=31
// +localStorage.getItem('STREET_NO')
      var url = this.$url+ '/GetGroupHotelsApi?ID'+localStorage.getItem('STREET_NO')
      const { data } = await this.$axios.get(url)
      console.log(data)
      this.data_tree = data.filter(item => {
        console.log(item)
        return item
      })
    },
    async loadAllBoxs (No) {
      // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/RubbishBoxApi?VillageNo=' + No + '&PeopleID=';
      var url = this.$url+ '/RubbishBoxApi?VillageNo=' + No + '&PeopleID='
      const { data } = await this.$axios.get(url)
      this.dataRubbishBoxsList = data.filter(item => {
        this.addMarker(item)
        return item
      })
    },
    handleNodeClick (data) {
      console.log(data);
      var type = 1;
      this.setScopeCircle(data)
      document.getElementById('span1').innerText = "单元名称：" + data.label;
      document.getElementById('span2').innerText = "地址：" + data.LOCATION;
      document.getElementById('span3').innerText = "管理单位：" + data.STREET_NAME;
      if (data.CONTACTS) {
        document.getElementById('span4').innerText = "联系人：" + data.CONTACTS;
      } else {
        document.getElementById('span4').innerText = "";
      }
      if (data.TELEPHONE) {
        document.getElementById('span5').innerText = "联系电话：" + data.TELEPHONE;
      } else {
        document.getElementById('span5').innerText ="联系电话：" + "";
      }
      if (data.CC) {
        document.getElementById('span6').innerText = "厨余垃圾桶：" + data.CC;
      } else {
        document.getElementById('span6').innerText = "厨余垃圾桶："+ "";
      }
      if (data.KHS) {
        document.getElementById('span7').innerText = "可回收垃圾桶：" + data.KHS;
      } else {
        document.getElementById('span7').innerText = "可回收垃圾桶："+ "";
      }
       if (data.QT) {
        document.getElementById('span8').innerText = "其他垃圾桶：" + data.QT;
      } else {
        document.getElementById('span8').innerText = "其他垃圾桶："+ "";
      }
      if (data.YH) {
        document.getElementById('span9').innerText = "有害垃圾桶：" + data.YH;
      } else {
        document.getElementById('span9').innerText = "有害垃圾桶："+ "";
      }
      // if(data.hotelDetails){
      //   document.getElementById("VillageDetail").setAttribute("hidden", true);
      // }else{
      //   document.getElementById("VillageDetail").removeAttribute("hidden", true);
      // }
      // if (data.longitude) {
      //   setMapCenterAtWorkerMarker(data);
      //   // document.getElementById("mapIFRAME").contentWindow.setMapCenter(data.longitude, data.latitude);
      //   // document.getElementById("mapIFRAME").contentWindow.addCircle(data.longitude, data.latitude);
      // }
    },
    // async loadDate_Tree () {
   
    //   var url = this.$url+ '/GetGroupHotelsApi?ID=34'
    //   const { data } = await this.$axios.get(url)
    //   // console.log(data)
    //   // this.treedata = Object.assign({},data)
    //   // this.treedata = data.filter(item => {
    //   //   // return item.children = Object.assign([],item.hotelDetails)
    //   //   console.log(item)
    //   //   return item
    //   //   // console.log(data.children)
    //   // })
    // },
    // handleNodeClick (data) {
      
    //   console.log(data)
    //   document.getElementById('span1').innerText = "单元名称：" + data.STREET_NAME;
    //   document.getElementById('span2').innerText = "地址：" + data.ADDRESS;
    //   document.getElementById('span3').innerText = "管理单位：" + data.STREET_NAME;
    //   if (data.CONTACTS) {
    //     document.getElementById('span4').innerText = "联系人：" + data.CONTACTS;
    //   } else {
    //     document.getElementById('span4').innerText = "";
    //   }
    //   if (data.TELEPHONE) {
    //     document.getElementById('span5').innerText = "联系电话：" + data.TELEPHONE;
    //   } else {
    //     document.getElementById('span5').innerText ="联系电话：" + "";
    //   }
    //   if (data.CC) {
    //     document.getElementById('span6').innerText = "厨余垃圾桶：" + data.CC;
    //   } else {
    //     document.getElementById('span6').innerText = "厨余垃圾桶："+ "";
    //   }
    //   if (data.KHS) {
    //     document.getElementById('span7').innerText = "可回收垃圾桶：" + data.KHS;
    //   } else {
    //     document.getElementById('span7').innerText = "可回收垃圾桶："+ "";
    //   }
    //    if (data.QT) {
    //     document.getElementById('span8').innerText = "其他垃圾桶：" + data.QT;
    //   } else {
    //     document.getElementById('span8').innerText = "其他垃圾桶："+ "";
    //   }
    //   if (data.YH) {
    //     document.getElementById('span9').innerText = "有害垃圾桶：" + data.YH;
    //   } else {
    //     document.getElementById('span9').innerText = "有害垃圾桶："+ "";
    //   }
    //   if(data.hotelDetails){
    //     document.getElementById("VillageDetail").setAttribute("hidden", true);
    //   }else{
    //     document.getElementById("VillageDetail").removeAttribute("hidden", true);
    //   }
    //   if (data.longitude) {
    //     setMapCenterAtWorkerMarker(data);
    //     // document.getElementById("mapIFRAME").contentWindow.setMapCenter(data.longitude, data.latitude);
    //     // document.getElementById("mapIFRAME").contentWindow.addCircle(data.longitude, data.latitude);
    //   }

    // },
    setScopeCircle (row) {
      var point = new BMap.Point(row.longitude, row.latitude)
      if (this.map_scopeCircle == '') {
        this.map_scopeCircle = new BMap.Circle(point, 120, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆
        this.map.addOverlay(this.map_scopeCircle);
      } else {
        // this.map_scopeCircle.setCenter(point)
      }
      this.map.centerAndZoom(point, 18)
      // this.map.removeoverlay(this.map_scopeCircle)
    },
    initMap () {
      var City = '天津'
      this.map = new BMap.Map('allmap')
      var point = new BMap.Point(117.612137, 39.043002) // 创建点坐标
      this.map.setCurrentCity(City)
      this.map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    },
    getDetails (row) {
      console.log(row)//此时就能拿到整行的信息
      this.setMapCenterAtWorkerMarker(row)
    },
    setMapCenterAtWorkerMarker (row) {
      this.map.centerAndZoom(new BMap.Point(row.longitude, row.latitude), 18)
    },
    addMarker_Person (row) {
      // new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
      var bounds = this.map.getBounds();

      var sw = bounds.getSouthWest();
      var ne = bounds.getNorthEast();
      var lngSpan = Math.abs(sw.lng - ne.lng);
      var latSpan = Math.abs(ne.lat - sw.lat);
      for (var i = 0; i < 25; i++) {
        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        var myIcon = new BMap.Icon("https://www.easyicon.net/api/resizeApi.php?id=1284995&size=32", new BMap.Size(32, 35));
        //var myIcon = new BMap.Icon(require("../src/assets/img/img.jpg"), new BMap.Size(32,35));
        var marker = new BMap.Marker(point, { icon: myIcon });
        this.map.addOverlay(marker);
      }
    }
  },
}
</script>
<style scoped>
hr {
    margin-top: 20px;
    margin-bottom: 15px;
}
.anchorBL{ display:none; }
.BMap_cpyCtrl { display:none; }
.allmap {
    width: 100%;
    height: 96%;
    border: 1px solid darkgrey;
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    margin: auto;
}
.direct,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
.tree {
    position: absolute;
    left: 10px;
    top: 40px;
    z-index: 555;
    width: 280px;
    height: 80%;
    opacity: 0.8;
    background: #fff;
}
.tree p {
    color: #60b6a1;
    font-size: 120%;
    margin-left: 10px;
    font-weight: 600;
}
.el-tree {
    color: #000;
    font-weight: 600;
    height: 100%;
    background: #fff;
}
.rightinformation {
    z-index: 555;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    background: #fff;
    /* opacity: 0.6; */
    color: #333;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow:-3px 0 15px 3px rgba(0, 0, 0, .3) ;
}
.rightinformation > p {
    width: 100%;
    margin-bottom: 3px;
    
}
hr{
 margin:10px 0;
}
.demo-input-suffix {
    float: left;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
}
.dialogwhole {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    height: 300px;
    font-size: 15px;
    opacity: 0.8;
    background: #fff;
    padding: 15px;
}
</style>